<template>
  <div>
    <ul>
      <li v-for="(item,index) in datalist.slice(4,29)" :key="item.index">
        <img :src="item.coverImgUrl" alt="" @mouseenter="enter(index)" @mouseleave='leaver()' @click="details(item.id)">
        <!-- <p class="p " v-show='activeindex ==index'><i class="el-icon-caret-right"></i></p> -->
        <p>{{item.name | ellipsis}}</p>
        <span class="num">{{item.playCount}}</span>
      </li>
    </ul>
  </div>
</template>
<style scoped>
ul {
  width: 970px;
  display: flex;
  flex-wrap: wrap;
}
ul > li {
  position: relative;
  margin: 10px;
  list-style: none;
  width: 165px;
  height: 165px;
  margin: 20px 10px;
}
div {
  height: 1200px;
}
ul li img {
  border-radius: 10px;
  width: 100%;
}
p:hover {
  text-decoration: underline;
  cursor: pointer;
}
.p {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}
.el-icon-caret-right {
  text-align: center;
  line-height: 50px;
  color: red;
  font-size: 50px;
}
.num {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
}
</style>
<script>
import { API } from "../../../common/constant";
import axios from "axios";
export default {
  data() {
    return {
			// zgai
      datalist: [],
      isShow: false,
      activeindex: -1,
			ranking:[],
			id:''
    };
  },
  mounted() {
    axios.get(`${API}/toplist`).then((res) => {
      // console.log(res);
      this.datalist = this.datalist.concat(res.data.list);
      for (let i = 0; i < this.datalist.length; i++) {
        if (this.datalist[i].playCount > 100000) {
          this.datalist[i].playCount =
            parseInt(this.datalist[i].playCount / 10000) + "万";
        }
      }
    });
		
		this.handluclick()
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
  methods: {
    // 播放显示与隐藏
    enter(index) {
      this.activeindex = index;
      // this.isShow = true;
    },
    leaver() {
      this.activeindex = -1;
      // this.isShow = false;
    },
    // axios
    details(id) {
			this.id=id
			this.handluclick()
      this.$router.push(`/details?q=${id}`);
    },
		handluclick(){
			axios.get(`${API}/playlist/detail`,{
				params:{
					id:this.id
				}
			}
			).then(res=>{
				// console.log(res);
			})
		}
  },
};
</script>
